<template>
	<view class="animated fadeIn faster d-flex d-flex-column">
		<view class="status-bar-height"></view>
		<view class="px-2 pt-3 pb-2">
			<view class="d-flex d-flex-center d-flex-middle mb-3">
				<text class="font32 color333">万域商友</text>
			</view>
			<view class="d-flex d-flex-middle d-flex-between">
				<view class="d-flex d-flex-middle mr-2">
					<text class="color222 mr">湖北省</text>
					<text class="iconfont icon-xiala2"></text>
				</view>
				<view class="search-box d-flex-item d-flex d-flex-middle d-flex-between">
					<view class="d-flex d-flex-middle">
						<text class="iconfont icon-chazhao font-bold font34 mr-1" style="color:rgba(19, 20, 21, .5)"></text>
						<text style="color:rgba(19, 20, 21, .5)">请输入想要查询的关键词</text>
					</view>
					<text class="font32 main-color">搜索</text>
				</view>
			</view>
		</view>
		<view class="d-flex">
			<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
			<view class="d-flex d-flex-center d-flex-middle" style="width: 30px;">
				<text class="iconfont icon-xiala2"></text>
			</view>
		</view>
		<view class="cateBox" :style="{'top':cateTop+'rpx'}">
			<scroll-view class="cate-left" v-if="cateList.length>0" scroll-y="true" enableBackToTop="true" :scroll-top="verticalNavTop" scroll-with-animation>
				<view class="cate-left-item " :class="{activeItem:currentTab==index}"  v-for="(item,index) in cateList" :key="index" @click="tapselect(index)">
					<text class="font30">{{item.title}}</text>
				</view>
			</scroll-view>
			
			<scroll-view ref="rightScrollV" class="cate-right" scroll-y="true" enableBackToTop="true" :scroll-into-view="'cate-'+mainCur" @scrolltolower="loadMore" scroll-with-animation>
				<view class="glist">
					<view class="glist-item d-flex d-flex-between" v-for="item in storeList" :key="item.id" @click="goPage()">
						<image :src="item.img" mode="aspectFill" class="glist-img"></image>
						<view class="d-flex d-flex-item d-flex-column py d-flex-between">
							<view class="d-flex d-flex-middle">
								<view class="d-flex d-flex-middle">
									<text class="msg-name font-500 font30">万众焊接</text>
									<text class="iconfont icon-yirenzheng mx-1 font26" style="color: rgb(255,192,51);"></text>
									<view class="border-main rounded5 px line-height30"><text class="font24">生产制造</text></view>
								</view>
							</view>
							<view class="d-flex d-flex-middle">
								<text class="msg-company iconfont icon-gongsixinxi font24 mr-1"></text><text class="msg-company font24">武汉万众焊接有限公司</text>
							</view>
							<text class="msg-note">行业领先企业</text>
						</view>
					</view>
				</view>
				<view style="height: 40%;" v-if="storeList.length == 0"></view>
				<view class="d-flex d-flex-column d-flex-middle pb-3">
					<image class="mb-1" v-if="storeList.length == 0" src="https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/iloading.gif" style="width:50rpx;height: 50rpx;"></image>
					<text class="font26 color999">{{storeList.length == 0?'加载中...':'没有更多数据了~'}}</text>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	const mockCate = [
		{
			id:'0',
			title:'全部行业'
		},{
			id:'1',
			title:'电子数码'
		},{
			id:'2',
			title:'五金百货'
		},{
			id:'3',
			title:'美食饮品'
		},{
			id:'4',
			title:'休闲玩乐'
		},{
			id:'5',
			title:'酒店民宿'
		},{
			id:'6',
			title:'运动健身'
		},{
			id:'7',
			title:'电影演出'
		},{
			id:'8',
			title:'电玩游戏'
		}
	]
	const mockData = [
		{
			id:'1',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store11.png',
			title:'小米之家(湖北武汉江汉路苏宁店)',
			distance:'1.1km',
			opening:true
		},{
			id:'2',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store10.png',
			title:'华为授权体验店(万达国际广场)',
			distance:'1.2km',
			opening:false
		},{
			id:'3',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store3.png',
			title:'大润发购物广场名烟名酒',
			distance:'1.2km',
			opening:true
		},{
			id:'4',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store4.png',
			title:'芙蓉兴盛便利超市',
			distance:'1.4km',
			opening:true
		},{
			id:'5',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store5.png',
			title:'五金水暖电料日用百货',
			distance:'1.4km',
			opening:true
		},{
			id:'6',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store6.png',
			title:'聚味中餐厅(福朋喜来登酒店)',
			distance:'1.5km',
			opening:false
		},{
			id:'7',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store7.png',
			title:'艺趣社创意手绘',
			distance:'1.5km',
			opening:true
		},{
			id:'8',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store8.png',
			title:'无印良品MUJI(江汉永旺店)',
			distance:'1.5km',
			opening:true
		},{
			id:'9',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store9.png',
			title:'醉得意(江汉店)',
			distance:'1.5km',
			opening:true
		},{
			id:'10',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store1.png',
			title:'二毛五金用品(武汉黄鹤楼店)',
			distance:'1.5km',
			opening:true
		},{
			id:'11',
			img:'https://env-00jxtf9stgc0.normal.cloudstatic.cn/images/store/store2.png',
			title:'松下灯具开关(江汉店)',
			distance:'1.5km',
			opening:true
		}
	]
	export default {
		data() {
			return {
				tabList:['全部店铺','收藏关注','浏览记录'],
				tabArr: [{
				    name: '武汉',
				    id: '1',
				}, {
				    name: '孝感',
				    id: '2'
				}, {
				    name: '黄冈',
				    id: '3'
				}, {
				    name: '随州',
				    id: '4'
				}, {
				    name: '宜昌',
				    id: '5'
				}, {
				    name: '十堰',
				    id: '6'
				}, {
				    name: '荆州',
				    id: '7'
				}, {
				    name: '荆门',
				    id: '8'
				}, {
				    name: '赤壁',
				    id: '9'
				}, {
				    name: '咸宁',
				    id: '10'
				}, {
				    name: '仙桃',
				    id: '11'
				}, {
				    name: '十堰',
				    id: '12'
				}, {
				    name: '鄂州',
				    id: '13'
				}, {
				    name: '黄石',
				    id: '14'
				}],
				cateTop:320,
				tabIndex:0,
				indexLeft:0,
				inderWidth:30,
				verticalNavTop: 0,
				hasData:false,
				currentTab:0,
				mainCur: 0,
				searchtxt:'',
				cateList:[],
				storeList:[]
			}
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success: function (res) {
					let rpx=(res.statusBarHeight * (750 / res.windowWidth))
					that.cateTop = rpx+310
				},
			});
		},
		onReady() {
			this.clickTab(0)
		},
		methods: {
			tabChange(currentIndex) {
				console.log(currentIndex)
			},
			loadMore(){
				console.log('加载更多...')
			},
			search(){
				let that = this
				if(that.searchtxt == ''){
					uni.showToast({
						title:'请输入店铺关键字',
						icon:'none'
					})
					return
				}
				that.storeList = []
				setTimeout(()=>{
					that.storeList = mockData.slice(5,10)
				},600)
			},
			tapselect(index){
				let that = this
				that.currentTab = index
				that.storeList = []
				setTimeout(()=>{
					that.storeList = mockData.slice(index,10)
				},600)
			},
			clickTab(index) {
				let that = this

				that.tabIndex = index
				if(index == 0){
					that.cateList = mockCate
					that.storeList = mockData
				}else if(index == 1){
					that.cateList = []
					that.storeList = []
					setTimeout(()=>{
						that.storeList = mockData.slice(5,9)
					},1000)
				}else{
					that.cateList = []
					that.storeList = []
					setTimeout(()=>{
						that.storeList = mockData.slice(3,6)
					},1000)
				}
			},
			goPage(){
				uni.navigateTo({
					url:'/pages/business/business'
				})
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style scoped>
	.ad{
		margin-top: 15rpx;
		width: 200rpx;
		height: 44rpx;
		background-color: #000000;
		border-radius: 22rpx;
	}
	.srch{
		height: 90rpx;
		border: solid 1px #FF4900;
		border-radius: 14rpx;
	}
	.srch-btn{
		color: #FB5919;
		font-size: 32rpx;
		font-weight: 500;
	}
	.items{
		font-size: 32rpx;
		font-weight: 500;
		color: #191919;
	}
	.market{
		background-color: #FF5816;
		border-radius: 28rpx;
		height: 56rpx;
		width: 180rpx;
		overflow: hidden;
	}
	.icurr{
		font-size: 36rpx;
		color:#FF4900;
		font-weight: 500;
	}
	.underscore {
		height: 3px;
		transition: .2s all;
		background-color: #FF4900;
		border-radius: 6rpx;
	}
	.msg-name{
		color: #E88A53;
	}
	.msg-company{
		color: #E3AA5E;
	}
	.msg-note{
		color: rgba(26, 27, 28, .7);
	}
	.border-main{
		color: #FF5816;
	}
	.cateBox {
		position: absolute;
		bottom: 10rpx;
		background: #fff;
		width: 718rpx;
		left: 15rpx;
		right: 15rpx;
		border: solid 1px #f2f2f2;
		border-radius: 20rpx;
		display: flex;
	}
	.cateLoading{}
	.cate-left {
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		width: 166rpx;
		background: #f9f9f9;
		height: 100%;
	}
	.cate-left-item {
		height: 80rpx;
		color:rgba(19,20,21,.6);
		font-weight: 400;
		display: flex;
		align-items: center;
	}
	.opendoor{
		font-size: 18rpx;
		padding-left:2rpx;
		padding-right:2rpx;
		border-radius: 4rpx;
		color: #FF4900;
		border: solid 1px #FF4900;
		background-color: #fff3f3;
	}
	.closedoor{
		font-size: 18rpx;
		padding-left:2rpx;
		padding-right:2rpx;
		border-radius: 4rpx;
		color: #bcbcbc;
		border: solid 1px #dddddd;
		background-color: #f0f0f0;
	}
	.cate-left-item:first-child{
		border-top-left-radius: 20rpx;
	}
	.cate-left-item:last-child{
		border-bottom-left-radius: 20rpx;
	}
	.cate-left-item.activeItem {
		background: #fff;
		font-weight: 500;
		color:rgba(19,20,21,1);
	}
	.cate-left-item label {
		width: 4rpx;
		height: 15px;
		float: left;
		background: #f4f4f4;
	}
	.cate-left-item.activeItem label {
		background: #0bbbef;
	}
	.cate-left-item text {
		width: 196rpx;
		font-size: 28rpx;
		display: block;
		text-align: center;
	}
	.cate-right {
		flex: 1;
	}
	.cate-right-title {
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
	}
	.cate-right-title .line {
			position: absolute;
			height: 2rpx;
			width: 300rpx;
			background: orange;
			top: 39rpx;
			left: 50%;
			margin-left: -150rpx;
		}
	
		.cate-right-title text {
			background: #fff;
			padding: 0 10px;
			position: relative;
			color: #999;
		}
	
		.cate-right-list {
			height: auto;
			overflow: hidden;
		}
	
		.cate-right-item {
			width: 33.33%;
			float: left;
			margin-top: 20rpx;
		}
	
		.cate-right-item image {
			width: 138rpx;
			height: 138rpx;
			display: block;
			margin: 0 auto;
		}
	
		.cate-right-item text {
			display: block;
			text-align: center;
			font-size: 24rpx;
		}
		
		.glist{
			padding:6rpx 18rpx 30rpx
		}
		.glist-item{
			border-bottom-style: solid;
			border-bottom-width: 1px;
			border-bottom-color: rgba(151,151,151,.1);
			padding-top: 24rpx;
			padding-bottom: 24rpx;
		}
		.glist-item:last-child{
			border-bottom-width: 0;
		}
		.glist-img{
			width: 152rpx;
			height: 152rpx;
			border-radius: 4rpx;
			margin-right: 24rpx;
		}
		.glist-label{
			height: 48rpx;
			background: #FAF7F7;
			border-radius: 4rpx;
		}
</style>
